<template>
  <div class="page-orderlist-wrapper">
    <div class="sticky pt-[20px] top-[86px] bg-white z-[1]">
      <n-tabs class="" v-model:value="status" @update:value="handleTabChange">
        <n-tab name=""> {{ $t("common.所有") }} </n-tab>
        <n-tab name="0">
          {{ $t(`orderStatus.${ORDER_STATUS[0]}`) }}
        </n-tab>
        <n-tab name="8"> {{ $t(`orderStatus.${ORDER_STATUS[8]}`) }} </n-tab>
        <n-tab name="9"> {{ $t(`orderStatus.${ORDER_STATUS[9]}`) }}</n-tab>
        <n-tab name="10"> {{ $t(`orderStatus.${ORDER_STATUS[10]}`) }} </n-tab>
        <n-tab name="3"> {{ $t(`orderStatus.${ORDER_STATUS[3]}`) }} </n-tab>
        <n-tab name="7"> {{ $t(`orderStatus.${ORDER_STATUS[7]}`) }} </n-tab>
      </n-tabs>
      <div class="head">
        <div class="flex-1">{{ $t("common.商品") }}</div>
        <div class="w-[120px] text-center">{{ $t("common.数量") }}</div>
        <div class="w-[200px]">{{ $t("common.状态") }}</div>
        <div class="w-[184px]">{{ $t("common.操作") }}</div>
      </div>
    </div>
    <div>
      <div class="order-wrapper" v-for="(item, index) in orderList" :key="index">
        <div class="title">
          <div>{{ $t("common.订单号") }}: {{ item.id }}</div>
          <div>{{ dayjs(item.createdDate).format("YYYY/MM/DD HH:mm:ss") }}</div>
          <div class="flex-1"></div>
          <div class="flex items-center text-[#507AFC]">
            <div class="cursor-pointer" @click="onClickGoInfo(item)">
              {{ $t("common.查看订单详情") }}
            </div>
            <template v-if="firstStepWaitPay(item.status)">
              <n-divider vertical />

              <n-popconfirm
                @positive-click="onClickCancelOrder(item)"
                :positive-text="$t('button.确定')"
                :negative-text="$t('button.取消')"
              >
                <template #trigger>
                  <!-- <n-icon class="cursor-pointer">
                    <TrashOutline></TrashOutline>
                  </n-icon> -->
                  <div class="cursor-pointer">
                    {{ $t("button.取消订单") }}
                  </div>
                </template>
                {{ $t("confirm.取消订单") }}
              </n-popconfirm>
            </template>

            <template v-if="item.status == 7">
              <n-divider vertical />

              <n-popconfirm
                @positive-click="onClickDelOrder(item)"
                :positive-text="$t('button.确定')"
                :negative-text="$t('button.取消')"
              >
                <template #trigger>
                  <n-icon class="cursor-pointer">
                    <TrashOutline></TrashOutline>
                  </n-icon>
                </template>
                {{ $t("confirm.删除订单") }}
              </n-popconfirm>
            </template>
          </div>
        </div>
        <div class="px-[32px] py-[16px]">
          <n-scrollbar class="max-h-[380px]" style="">
            <div class="flex flex-col gap-4">
              <template v-for="(sub, x) in item.subOrders" :key="sub.id">
                <div
                  v-for="(g, y) in sub.items"
                  :key="g.id"
                  class="flex items-center gap-8 text-[18px] font-[300]"
                >
                  <div
                    class="flex items-center flex-1 gap-4 cursor-pointer"
                    @click="goGoods(g.offerId)"
                  >
                    <img
                      :src="g.whiteImage"
                      class="w-[72px] h-[72px] rounded-md"
                      style="border: 1px solid #aaaaaa"
                    />
                    <div class="flex-1">
                      <div class="text-[#5C5C5C] leading-[22px]">
                        <n-ellipsis :line-clamp="2" :tooltip="false">
                          {{ g.subject }}
                        </n-ellipsis>
                      </div>
                      <div class="text-[16px] text-[#AAAAAA] leading-[20px]">
                        <n-ellipsis :line-clamp="1" :tooltip="false">
                          <div v-if="g.specInfo">
                            <div
                              class="flex gap-[6px]"
                              v-for="(s, i) in JSON.parse(g.specInfo)"
                            >
                              <div class="flex-1">{{ s.valueTrans }}</div>
                            </div>
                          </div>
                        </n-ellipsis>
                      </div>
                    </div>
                  </div>

                  <div class="w-[120px] text-center text-[#5C5C5C] flex">
                    <div class="flex items-center m-auto">
                      <n-icon>
                        <CloseOutline></CloseOutline>
                      </n-icon>
                      {{ formatMoney(g.quantity, 0) }}
                    </div>
                  </div>
                  <div class="w-[200px] text-center text-[#5C5C5C]">
                    <template v-if="(x + 1) * (y + 1) == 1">{{
                      $t(`orderStatus.${ORDER_STATUS[item.status]}`)
                    }}</template>
                  </div>
                  <div class="w-[184px] text-center text-[--main-color]">
                    <!-- <template v-if="(x + 1) * (y + 1) == 1">Comprar Otra Vez</template> -->
                  </div>
                </div>
              </template>
            </div>
          </n-scrollbar>
        </div>
        <div class="amount-wrapper">
          <div class="h-[80px]">
            <div class="flex-1 text-[18px] font-[300] text-[#303030]">
              <span class="text-[--main-color] mr-[8px]">{{ $t("common.阶段") }} 1:</span>
              <span>{{ $t("step.一阶段付款") }}</span>
            </div>
            <div class="w-[200px] flex">
              <div class="flex items-center justify-end pr-[36px] flex-1 m-auto">
                <money
                  :money="item.totalAmount / 100"
                  :is-cny="false"
                  class="text-[#5c5c5c]"
                  :moneyStyle="{ fontWeight: 300 }"
                  :rate="item.currencyRate"
                ></money>
                <!-- <n-popover trigger="hover" placement="right">
                  <template #trigger>
                    <n-icon class="text-[18px] text-[#0866FF] cursor-pointer ml-[8px]">
                      <HelpCircle></HelpCircle>
                    </n-icon>
                  </template>
                  <div class="flex flex-col">
                    <div class="flex items-center">
                      {{ $t("common.订单金额") }}：
                      <money
                        :money="item.totalAmount / 100 + item.totalDiscount / 100"
                        :is-cny="false"
                        :rate="item.currencyRate"
                      ></money>
                    </div>
                    <div class="flex items-center">
                      {{ $t("common.优惠金额") }}：
                      <money
                        :money="item.totalDiscount / 100"
                        :is-cny="false"
                        :rate="item.currencyRate"
                      ></money>
                    </div>
                  </div>
                </n-popover> -->
              </div>
            </div>
            <div class="w-[184px] flex flex-col text-center">
              <template v-if="firstStepWaitPay(item.status)">
                <div class="text-[#EA0000] flex items-center m-auto gap-2">
                  <n-icon class="">
                    <TimeOutline></TimeOutline>
                  </n-icon>
                  <n-countdown
                    :duration="
                      dayjs(item.createdDate).add(1, 'day').diff(dayjs(), 'millisecond')
                    "
                  />
                </div>
                <n-button type="primary" round @click="onClickPayOrder(item)">
                  {{ $t("button.立即支付") }}
                </n-button>
              </template>
              <template v-else>
                <div class="text-[#5C5C5C] font-[300] text-[18px]">
                  {{ firstStepPaied(item.status) ? $t("common.已付款") : "" }}
                </div>
              </template>
            </div>
          </div>
          <div class="h-[80px]" v-if="item.logisticsSelfCare == false">
            <div class="flex-1 text-[18px] font-[300] text-[#303030]">
              <span class="text-[--main-color] mr-[8px]">{{ $t("common.阶段") }} 2:</span>
              <span>{{ $t("step.二阶段付款") }}</span>
            </div>

            <div class="flex items-center w-[560px] font-[300] text-[#5C5C5C]">
              <div class="flex justify-end flex-1 pr-[60px]" v-if="item.status == 7">
                -
              </div>
              <div
                class="flex justify-end flex-1 pr-[60px]"
                v-else-if="item.clearanceFee > 0"
              >
                <money
                  class="text-[#5c5c5c]"
                  :moneyStyle="{ fontWeight: 300 }"
                  :money="
                    item.clearanceFee / 100 +
                    item.qualityInspectionFee / 100 +
                    item.insurance / 100
                  "
                  :is-cny="false"
                  :rate="item.currencyRate"
                  :surcharge="item.overseasExpressFee / 100"
                ></money>
              </div>
              <div v-else>{{ $t("tips.等待确认") }}</div>
            </div>
            <div class="w-[184px] flex flex-col text-center">
              <template v-if="secondStepPaied(item.status)">
                <div class="text-[#5C5C5C] font-[300] text-[18px]">
                  {{ $t("common.已付款") }}
                </div>
              </template>
              <template v-else>
                <template v-if="secondStepWaitPay(item.status)">
                  <n-button type="primary" round @click="onClickPayOrder(item, true)">
                    {{ $t("button.立即支付") }}
                  </n-button>
                </template>
                <template v-else-if="item.status == 7">
                  <!-- 订单已取消 -->
                </template>
                <template v-else>
                  <n-button type="" round :disabled="true">
                    {{ $t("button.立即支付") }}
                  </n-button>
                </template>
              </template>
              <!-- <n-button type="" round :disabled="(item.status)">
                {{ $t("button.立即支付") }}
              </n-button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-center" v-if="totalCount > request.pageSize">
      <n-pagination
        v-model:page="request.pageIndex"
        :item-count="totalCount"
        :page-size="request.pageSize"
        @update:page="onPageChange"
      />
    </div>
    <payLoadingDialog ref="payLoadingDialogRef" v-model:progressModal="progressModal">
    </payLoadingDialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import dayjs from "dayjs";
import { getOrderList, cancelOrder, deleteOrder } from "@/api/order";
import { HelpCircle, TimeOutline, TrashOutline, CloseOutline } from "@vicons/ionicons5";
import money from "@/components/money.vue";
import { formatMoney } from "@/utils/formatMoney";
import { goGoods } from "@/utils/common";
import { useRouter } from "vue-router";
import {
  ORDER_STATUS,
  firstStepWaitPay,
  firstStepPaied,
  secondStepPaied,
  secondStepWaitPay,
} from "@/utils/common";
import payLoadingDialog from "@/components/payLoadingDialog.vue";
const status = ref("");
const router = useRouter();
const orderList = ref([]);
const payLoadingDialogRef = ref();
const progressModal = ref({
  orderId: "",
  loading: false,
  show: false,
  message: "",
});
const request = ref({
  pageIndex: 1,
  pageSize: 10,
});
const totalCount = ref(0);
const handleTabChange = async (_status) => {
  request.value.pageIndex = 1;
  await getOrderListHandler();
};
const getOrderListHandler = async () => {
  const { data } = await getOrderList({
    orderBy: "id",
    status: status.value,
    ...request.value,
  });
  totalCount.value = data.data.total;
  orderList.value = data.data.items;
  //页面滚动到顶部
  window.scrollTo({ top: 0, behavior: "smooth" });
};

getOrderListHandler();

const onClickBuyAgain = (item) => {};

const onClickGoInfo = (item) => {
  // console.log("%c Line:207 🥐 item", "color:#ed9ec7", item);
  router.push(`/orderInfo/${item.id}`);
};

const onClickCancelOrder = async (item) => {
  await cancelOrder(item.id);
  await getOrderListHandler();
};

const onClickPayOrder = async (item, second) => {
  progressModal.value.show = true;
  progressModal.value.orderId = item.id;
  await payLoadingDialogRef.value.payOrder(second);
};

const onClickDelOrder = async (item) => {
  await deleteOrder(item.id);
  await getOrderListHandler();
};

const onPageChange = async (page) => {
  request.value.pageIndex = page;
  await getOrderListHandler();
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  padding: 6px 32px;
  margin: 16px 0;
  background-color: #f8f8f8;
  text-align: center;
  gap: 32px;
  border: 1px solid #d8d8d8;
  color: #5c5c5c;
  font-size: 16px;
  font-weight: 300;
}
.order-wrapper {
  border: 1px solid #d8d8d8;
  border-radius: 0px;
  overflow: hidden;
  margin-bottom: 24px;
  .title {
    background: #fff4e4;
    padding: 0px 18px;
    font-size: 16px;
    color: #5c5c5c;
    font-weight: 300;
    height: 32px;
    line-height: 32px;
    display: flex;
    gap: 32px;
    margin: 8px 18px 0 18px;
  }

  .amount-wrapper {
    > div {
      border-top: 1px solid #d8d8d8;
      padding: 0px 32px;
      display: flex;
      align-items: center;
      gap: 32px;
    }
  }
}

.page-orderlist-wrapper {
  ::v-deep(.n-tabs .n-tabs-tab) {
    font-size: 18px;
    color: #3d3d3d;
    &.n-tabs-tab--active {
      color: var(--main-color);
    }
  }
}
</style>
